<div >
    <nz-descriptions nzBordered >
        <nz-descriptions-item nzTitle="角色名称" [nzSpan]="1">{{role?.roleName}}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="角色键值" [nzSpan]="2">{{role?.roleKey}}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="权限范围" [nzSpan]="3">{{role?.dataScopeName}}</nz-descriptions-item>
        <nz-descriptions-item nzTitle="部门权限" [nzSpan]="3" style="overflow-y: auto; max-height: 40px;">
            <span style="padding-right: 10px;" *ngFor="let dept of role?.depts">
                {{dept.deptName}}
            </span>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="关联权限" [nzSpan]="3" style="overflow-y: auto; max-height: 40px;">
            <span style="padding-right: 10px;" *ngFor="let menu of role?.menus">
                {{menu.menuName}}
            </span>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="关联分组" [nzSpan]="3" style="overflow-y: auto; max-height: 40px;">
            <span style="padding-right: 10px;" *ngFor="let group of role?.groups">
                {{group.groupName}}
            </span>
        </nz-descriptions-item>
        <nz-descriptions-item nzTitle="描述" [nzSpan]="3">{{role?.remark}}</nz-descriptions-item>
    </nz-descriptions>

    <div nz-row nzJustify="end" class="action-area" style="margin-top: 10px;">
        <div nz-col>
            <button class="action-button" nz-button (click)="onClose($event)">关闭</button>
        </div>
    </div>
</div>